<template>
    <div>我是页面一
        <el-button type="primary" @click="$router.push('/exe')">点击跳转</el-button>
        <h3>测试表单校验</h3>
        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input v-model.number="numberValidateForm.age" autocomplete="off" ></el-input>

  </el-form-item>
  <el-form-item
    label="年龄"
    prop="name"
    :rules="[
      { required: true, message: '名字不能为空'}
    ]"
  >
    <el-input v-model="numberValidateForm.name" autocomplete="off" ></el-input>

  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
    
</template>

<script>
export default {
    name:'pageOne',
    data (){
        return {
          numberValidateForm: {
          age: '',
          name: ''
        }
        }
    },
     methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!','校验通过');
          } else {
            console.log('error submit!!');
            return false;   
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>